<template>
    <div class="oh box">
        <header class="tc w100">
            <div class="title pr pr20 pl20">
                <img @click="backNearby" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn">导航</h1>
            </div>
        </header>
        <div class="mapContent bcfff ml20 mr20">
            <div id="map1"></div>
        </div>
        <main class="bcfff ">
            <ul class="footer  bcff bs flex pf w100 jcsb f20 aic">
                <li>
                    <h2 class="pb20 f35">车百事汽车生活馆</h2>
                    <p>山阳区人民路与解放路交叉口</p>
                </li>
                <li class="pr15">
                    <a href="#" class="pay-order f25 cfff">
                        导航
                    </a>
                </li>
            </ul>
        </main>
    </div>
</template>
<script>
export default{
    mounted() {
         // 按住鼠标右键，修改倾斜角和角度
        var map = new BMapGL.Map("map1");    // 创建Map实例
        // 初始化地图,设置中心点坐标和地图级别     113.578744,34.809352
        map.centerAndZoom(new BMapGL.Point(118.821789,32.168254), 10);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        var myIcon = new BMapGL.Icon(require('../../../assets/img/car-repair-img/stores-tab.png'), new BMapGL.Size(20, 30), {
            anchor: new BMapGL.Size(10, 30),
        });
        var point = new BMapGL.Point(113.566198, 34.705087);
        // 创建标注对象并添加到地图  
        var marker = new BMapGL.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
    },
    methods:{
        backNearby(){
            this.$router.push('nearbyStores')
        }
    }
}
</script>
<style>
.box main{padding: 0 20rem;}
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
.box .mapContent{padding: 20rem 20rem 0;border-radius: 20rem 20rem 0 0 ;margin-top: -300rem;}
#map1{width: 100%;height: 1025rem;border-radius: 20rem 20rem 0 0;}
main ul{display: flex;justify-content: space-between;}
main ul li .destined {padding: 20rem 0;width: 150rem;border: none;border-radius: 33rem;background-color: #2779f6;color: #fff;height: 70rem;}

ul.footer{height: 150rem;left: 0; bottom:0;padding: 0 20rem;background-color: #fff; }
ul.footer img.waiter{height: 40rem; width: auto;vertical-align: middle;}
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 50rem;border-radius: 50rem;}
</style>